<template>
	<view>
	<view class="flowsheet-box">
		<view class="time-box">
			<view class="time">{{data.createTime}}</view>
			<view class="sign"></view>
		</view>
		<view class="info-box">
			<view class="userinfo-box">
				<image class="portrait" mode="aspectFit" src="/static/image/user.png"></image>
				<view class="nickname">{{data.createUser}}</view>
			</view>
			<rich-text class="content" v-if="type == 'cycle'" :nodes="cycleStatusText"></rich-text>
			<view class="enclosure" v-if="type == 'cycle'">
				<view class="enclosure-title">
					备注：
				</view>
				<rich-text class="enclosure-src" :nodes="data.operationDesc"></rich-text>
			</view>
			<rich-text class="content" v-if="type == 'update'" :nodes="data.updateDetail"></rich-text>
			<view class="enclosure"  v-for="(item,index) in data.images" :key="item.id" @click="previewImage(item)" v-if="type == 'update' && data.images.length > 0">
				<view class="enclosure-title">
					附件：
				</view>
				<view class="enclosure-src">
					<view class="item">{{item.fileName}}</view>
				</view>
			</view>
			<view class="enclosure" v-for="(item,index) in data.files" :key="item.id" @click="previewFile(item)" v-if="type == 'update' && data.files.length > 0">
				<view class="enclosure-title">
					附件：
				</view>
				<view class="enclosure-src">
					<view class="item" >{{item.fileName}}</view>
				</view>
			</view>
			
		</view>
	</view>
	</view>
</template>

<script>
	import {baseUrl} from '@/utils/request.js';
	import {downloadImages} from '@/utils/utils.js';
	export default {
		props:{
			data:{
				type:Object,
				default:{}
			},
			type:{
				type:String,
				default:'cycle'
			}
		},
		data() {
			return {
				cycleStatusText:'',
				list:[],// 图片临时存放池
				fileList:[], // 文件临时存放池 
				cycleStatusList:[
					{
						id:1,
						name:'创建',
					},
					{
						id:2,
						name:'开始',
					},
					{
						id:3,
						name:'继续'
					},
					{
						id:4,
						name:'暂停'
					},
					{
						id:5,
						name:'完结'
					},
					{
						id:6,
						name:'指派'
					},
					{
						id:7,
						name:'完成提报'
					},
					{
						id:8,
						name:'异常提报'
					},
					{
						id:9,
						name:'提报退回'
					},
					{
						id:10,
						name:'提报通过'
					},
				],
			}
		},
		mounted(){
			let that = this;
			let type = that.type;
			if(type == 'cycle'){
				that.$nextTick(function(){
					that.cycleStatusChange();
				})
			}
		},
		methods: {
			/**
			 * 周期状态转换文字形式
			 */
			cycleStatusChange:function(){
				let that = this;
				let cycleStatusList = that.cycleStatusList;
				let result =cycleStatusList.filter(res=>{
					return res.id == that.data.operationType
				})
				that.cycleStatusText = result[0].name;
			},
			/**
			 * 预览图片
			 */
			previewImage:function(item){
				let list = this.list;
				let data = list.filter(res=>{
					return res.id == item.id
				})
				if(data.length > 0){
					let arr = [];
					arr.push(data[0].tempFilePath);
					uni.previewImage({
								urls: arr,
							});
				}else{
					this.taskImage(item.url,item);
				}
				
			},
			/**
			 * 附件图片下载
			 */
			taskImage:function(imageurl,item){
				let that = this;
				let list = that.list;
				downloadImages(imageurl).then(res=>{
					let arr = [];
					arr.push(res.tempFilePath);
					uni.previewImage({
						urls: arr,
					});
					list.push(Object.assign({tempFilePath:res.tempFilePath},item));
					that.list = list;
				})
			},
			/**
			 * 预览文件
			 */
			previewFile:function(item){
				console.log('files',item);
				let fileName = item.fileName.lastIndexOf(".");
				let fileFormat = item.fileName.substring(item.fileName + 1, item.fileName.length);
				if(fileFormat == 'doc' || fileFormat == 'xls' || fileFormat == 'ppt' || fileFormat=='pdf' || fileFormat == 'docx' || fileFormat == 'xlsx' || fileFormat == 'pptx'){
				let fileList = this.fileList;
				let data = fileList.filter(res=>{
					return res.id == item.id
				})
				
				console.log(data,fileList);
				if(data.length > 0){
					uni.openDocument({
					      filePath: escape(data[0].tempFilePath),
					      showMenu: false,
					      success: function (res) {
					        console.log('打开文档成功');
					      },
						  fail:function(err){
						  		uni.showToast({
						  			title: '不支持失败文件类型',
						  			con:'none',
						  			duration: 2000
						  		});
						  },
					});
				}else{
					this.downloadFile(item);
				}
				}else{
					this.previewImage(item);
				}
			},
			/**
			 * 附件文件下载
			 */
			downloadFile:function(data){
				let that = this;
				downloadImages(data.url).then(res=>{
					let fileName = data.url.lastIndexOf(".");
					let fileFormat = data.url.substring(fileName + 1, data.url.length);
					console.log('文件名',fileFormat);
					if(fileFormat == 'doc' || fileFormat == 'xls' || fileFormat == 'ppt' || fileFormat=='pdf' || fileFormat == 'docx' || fileFormat == 'xlsx' || fileFormat == 'pptx'){
					let fileList = that.fileList;
					fileList.push(Object.assign({tempFilePath:res.tempFilePath},data));
					that.fileList = fileList;
					 uni.openDocument({
					      filePath: escape(res.tempFilePath),
					      showMenu: false,
					      success: function (res) {
					        console.log('打开文档成功');
					      },
						  fail:function(err){
						  		uni.showToast({
						  			title: '不支持失败文件类型',
						  				icon:'none',
						  				duration: 2000
						  		});
						  },
					});
					}else{
						let list = that.list;
						let arr = [];
						arr.push(res.tempFilePath);
						uni.previewImage({
							urls: arr,
						});
						list.push(Object.assign({tempFilePath:res.tempFilePath},item));
						that.list = list;
					}
				})
				
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.flowsheet-box {
		display: flex;
		width: 100%;
		overflow: hidden;
		.time-box {
			display: flex;
			position: relative;
			// overflow: hidden;
			.time {
				font-size: 24rpx;
				color: #c5c5c5;
				width: 160rpx;
				white-space: pre-wrap;
				text-align: right;
			}

			.sign {
				width: 40rpx;
				height: 40rpx;
				background-color: #979797;
				border-radius: 100%;
				// margin-top:20rpx;
				margin-left: 20rpx;
			}
		}

		.info-box {
			flex:1;
			margin-bottom: 20rpx;
			margin-left: 20rpx;
			overflow: hidden;
			background-color: white;
			padding: 20rpx;
			border:2rpx solid #edefee;
			.userinfo-box {
				font-size:28rpx;
				display: flex;
				.portrait {
					width: 80rpx;
					height: 80rpx;
					border-radius: 100%;
					background-color: #1594c1;
				}

				.nickname {
					line-height: 80rpx;
					margin-left: 20rpx;
					color: #d3d3d3;
				}
			}
			.content{
				font-size:28rpx;
				word-wrap:break-word;
			}
			.enclosure{
				display: flex;
				font-size:24rpx;
				background-color: #afafaf;
				overflow: hidden;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				padding:10rpx;
				.enclosure-title{
					white-space: nowrap;
				}
				.enclosure-src{
					overflow: hidden;
					word-wrap:break-word;
					.item{
						margin-bottom: 20rpx;
					}
					.item:last-child{
						margin-bottom: 0;
					}
				}
			}
		}
	}

	.time-box::after {
		content: '';
		position: absolute;
		background-color: #949695;
		width: 2rpx;
		height: calc(100% - 40rpx);
		right: 20rpx;
		top: 40rpx;
	}
</style>
